import { useState } from 'react'
import './style.scss'
import { userLoginAction } from '@/reducer/user'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { useNavigate, Navigate } from 'react-router-dom'

//引入第三方库的组件
import { Button, Checkbox, Form, Input, message } from 'antd'
import { useDispatch } from 'react-redux'

const Index = () => {
  const dispatch = useAppDispatch()
  const navigate = useNavigate()

  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)

  const onFinish = async (values: UserType.ILogin) => {
    setLoading(true)

    let code = await dispatch(userLoginAction(values))
    if (code === 0) {
      message.open({
        type: 'success',
        duration: 2,
        content: '登录成功',
        onClose: () => {
          navigate('/info/dashboard', { replace: true })
        }
      })
    } else {
      message.open({
        type: 'error',
        duration: 3,
        content: '账号或密码不正确',
        onClose: () => {
          setLoading(false)
        }
      })
    }
  }
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)

  }
  return (
    <div className='admin-login'>
      <h1>后台登录</h1>

      <Form
        // labelCol为文字标签长度，wrapperCol控制输入框长度，initialValues为初始数据，可以填写默认值
        //onFinish表单提交成功事件，onFinishFailed提交失败触发事件
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true, username: 'admin', password: 'admin888' }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="账号"
          name="username"
          rules={[{ required: true, whitespace: true, message: '账号不能为空' },
          {
            //validator	自定义校验，接收 Promise 作为返回值      (rule, value) => Promise
            validator: (rule: any, value: string) => {
              if (value.length > 6) {
                return Promise.reject('账号信息必须为1到5之间')
              }
              return Promise.resolve()
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, whitespace: true, message: '密码不能为空' },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 6, span: 14 }}
        >
          <Checkbox>记住用户</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 14 }}>
          <Button type="primary" htmlType="submit">
            进入系统
          </Button>
          &nbsp;
          <Button
            type='default'
            onClick={() => {
              form.resetFields()
            }}
          >
            重置表单
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
